<template>
  <!--特价商品模块-->
  <div class="bargain">
    <h4><span>特</span>价商品</h4>
    <div>
      <img src="@/assets/img/sanguo.jpg"><br>
      <a href="#">《品三国(上)》</a>
      <p class="original-price">原价：54.0</p>
      <p class="current-price">现价：38.0</p>
      <button>详细信息</button>
    </div>
    <div>
      <img src="@/assets/img/xiongdi.jpg"><br>
      <a href="#">《兄弟(下)》</a>
      <p class="original-price">原价：23.0</p>
      <p class="current-price">现价：18.0</p>
      <button>详细信息</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bargain"
}
</script>

<style scoped>
.bargain{
  height: 340px;
  width: 100%;
  /*background-color: #b7e0d8;*/
  float: left;
}
.bargain>h4{
  border-bottom: 1px solid black;
  font-weight: lighter;
  height: 30px;
  line-height: 30px;
  width: 130px;
  font-size: 22px;
  margin-left: 50px;
  letter-spacing: 10px;
  background-color:#f8f8f8 ;
}
.bargain>>h4>span{
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
}
.bargain>div{
  border-top: 1px dotted darkgrey;
  margin-top: 5px;
  width: 49%;
  height: 240px;
  text-align: center;
}
.bargain>div:nth-of-type(1){
  border-right: 1px dotted darkgrey;
  float: left;
}
.bargain>div>img{
  margin-top: 20px;
  width: 118px;
  height: 160px;
}
.bargain>div:nth-of-type(2){
  float: left;
}
.bargain>div>.original-price{
  color: red;
  text-decoration: line-through;
}
.bargain>div>button{
  width: 80px;
}
</style>